<template>
  <div class="fooberbox">
    <div class="head">行业新闻</div>
    <ul>
      <li
        v-for="(item, index) in arr"
        :key="index"
        :style="`background:${item.background};`"
      >
        <div>{{ item.tit }}</div>
        <p>{{ item.info }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [
        {
          tit: "手把手教你卖货",
          info: "社交电商获客八步曲",
          background: "#FF996C"
        },
        {
          tit: "卖零食月入 800 万",
          info: "十五年老店凭啥火爆全城",
          background: "#869FE4"
        },
        {
          tit: "日涨粉1.2W+",
          info: "做好一场活动的秘诀你get了吗",
          background: "#FB6E6E "
        },
        {
          tit: "公众号不知道怎样吸粉？",
          info: "在涨粉之家打破困局",
          background: "#BE94EB"
        }
      ]
    };
  },
  methods: {}
};
</script>

<style lang="scss" scoped>
.fooberbox {
  height: 228px;
  background: #fff;
  padding: 16px;
  .head {
    font-family: PingFangSC-Regular;
    font-size: 20px;
    color: #000000;
    margin-bottom: 10px;
    font-weight: bold;
  }
  ul {
    display: flex;
    justify-content: space-around;
    li {
      width: 338px;
      height: 144px;
      text-align: center;
      color: #fff;
      padding-top: 42px;
      margin-top: 26px;
      box-sizing: border-box;
      div {
        font-size: 20px;
        margin-bottom: 10px;
      }
      p {
        font-size: 12px;
      }
    }
  }
}
</style>
